<!--
 * @Description:
 * @Author: dh
 * @Date: 2022-08-04 09:11:17
 * @LastEditors: dh
 * @LastEditTime: 2022-12-05 17:08:41
-->
<template>
	<div>{{ piniaA.msg }}</div>
	<div>{{ piniaB.msg }}</div>
	<div>{{ msg }}</div>
	<button @click="change">直接修改</button>
	<button @click="changeByPatch">$patch修改</button>
	<button @click="reset">重置PiniaA模块</button>
	<button @click="changeByAction">调用action修改</button>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { PiniaA } from '@/store/pinia/piniaA';
import { PiniaB } from '@/store/pinia/piniaB';
import { PiniaC } from '@/store/pinia/piniaC';

const piniaA = PiniaA();
const piniaB = PiniaB();
const piniaC = PiniaC();

// TODO const { msg } = PiniaC(); 直接结构将失去响应，采用 storeToRefs
const { msg } = storeToRefs(piniaC);

const change = () => {
	// 直接修改
	piniaA.msg = 'A';
	piniaB.msg = 'B';
	msg.value = 'C';
};
const changeByPatch = () => {
	// 通过对象修改
	piniaA.$patch({
		msg: 'AA',
	});
	// 通过函数修改
	piniaB.$patch(state => {
		state.msg = 'BB';
	});
};

// 通过整个对象修改，必须传入每个属性 ，不常用
// piniaA.$state = { msg: '', };

// 通过action修改
const changeByAction = () => {
	piniaA.changeMsg('123');
};

const reset = () => {
	// TODO 重置pinia
	piniaA.$reset();
};

// 监听 state,任何值改变都会触发
piniaA.$subscribe(
	(args, state) => {
		console.log('$subscribe==========', { args, state });
	},
	{
		//配置
	}
);
// 监听 action,任何action调用都会触发 , 第二参数为true时，组件销毁继续监听
piniaA.$onAction(args => {
	console.log('$onAction=======', args);
}, true);
</script>

<style scoped></style>
